<template>
  <OjContainer :showLeftAside="true" :showRightAside="false">
    <template v-slot:left-aside>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <el-menu
          :collapse="isCollapse"
          :default-active="activeMenu"
          @close="handleClose"
          @open="handleOpen"
          @select="handleSelect">
        <el-menu-item index="1">
          <i class="el-icon-setting"></i>
          <span slot="title">设置一</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          <span slot="title">设置二</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-setting"></i>
          <span slot="title">设置三</span>
        </el-menu-item>
      </el-menu>
    </template>
    <template v-slot:main>
      <p>设置页面</p>
    </template>
  </OjContainer>
</template>

<script>
import OjContainer from '@/components/OjContainer.vue';
export default {
  components: {
    OjContainer
  },
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>